<template>
    <div>
        <div class="message-1 clearfix">
            <van-row class="cz-title">
                <van-col span="3">
                    <img class="fl icon_return" src="../../assets/image/center/icon_return.png" alt="" @click="returnIndex">
                </van-col>
                <van-col span="18" class="text-align-c font-36">
                    消息中心
                </van-col>
                <van-col span="3">
                    <img class="fr icon_return" src="../../assets/image/index/icon_search.png" alt="" @click="secrchListMessage()">
                </van-col>
            </van-row>
            <div class="dynamic-name clearfix">               
                <router-link tag="div" :to="{name:'xtMessage'}" class="clearfix comments-box">
                    <img class="fl dynamic-name-tx comments-tx" src="../../assets/image/index/xt-message.png" alt="">
                    <span class="fl messHint" v-show="isHint1"></span>
                    <div class="name-box fl clearfix comments-box" style="border:none;">
                        <span class="name-box-top">
                        <em class="fl font-28 color-3 font-bold">系统消息</em>                       
                        </span>
                        <span class="name-xia comments-c color-9 font-24">
                            {{title1}}
                        </span>
                    </div>                   
                </router-link>
            </div>
            <router-link tag="div" :to="{name:'hdMessage'}" class="dynamic-name clearfix">
                <img class="fl dynamic-name-tx comments-tx" src="../../assets/image/index/hd.png" alt="">
                <span class="fl messHint" v-show="isHint2"></span>
                <div class="name-box fl clearfix comments-box" style="border:none;">
                    <span class="name-box-top">
                        <em class="fl font-28 color-3 font-bold">互动消息</em>                       
                    </span>
                    <span class="name-xia comments-c color-9 font-24">
                        {{title2}}
                    </span>
                </div>
            </router-link>
        </div>
        <div class="give-like-img clearfix">
            <ul class="clearfix">
                <li class="clearfix income-li" v-for="(item,index) in chatAll" :key="index">
                    <div class="fl left-box ">                        
                        <img class="border-radius-50 fl" :src="$imgPath(item.sendUser.headImg)" alt="">
                        <span class="messHint fl" v-show="isHint3"></span>
                    </div>
                    <div class="fl right-box" @click="chatLink(item.sendUser.nickName,item.sendUser.code,item.sendUser.headImg,item.sendUser.id,item.id)">
                        <span class="color-3 font-28">
                            <em class="fl">{{item.sendUser.nickname}}</em>
                            <em class="fr color-9 font-24">{{item.createTime}}</em>
                        </span>
                        <span class="color-9 font-24">
                            {{item.descript}}
                        </span>
                    </div>
                </li>
            </ul>
        </div>
        <li class="hnit" v-if="isShowHnit==true">{{hnit}}</li>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
import { Toast } from 'vant';
export default {
    data(){
        return{
            isHint1:false,
            isHint2:false,
            isHint3:true,
            isShowHnit:false,
            hnit:"暂无对话消息",
            title1:"",
            title2:"" ,
            page:0,
            size:10,
            chatAll:[]
        }
    },
    created(){
        this.getcountsystemMessage();
        this.getcountInteractionMessage();
        this.listByChatAll();
    },
    methods:{
        //首页系统消息未读消息数量
        getcountsystemMessage(){
            apiHttp.messageIndex.getcountsystemMessage(170,'',resp=>{
                if(resp.code==200){
                    if(resp.data==null||resp.data==undefined){
                        this.title1 = "暂无系统消息！";
                    }else{
                        if(resp.data.count<1){
                            this.title1 = "暂无新的系统消息！";
                        }else {
                            this.isHint1 = true;
                            this.title1 = resp.data.title;
                        }
                    }
                    
                }else {
                    Toast(resp.message)
                }

            })
       },
       //首页互动消息未读消息数量
        getcountInteractionMessage(){
            apiHttp.messageIndex.getcountInteractionMessage('',resp=>{
                if(resp.code==200){
                    if(resp.data==null||resp.data==undefined){
                        this.title2 = "暂无互动消息！";
                    }else{
                        if(resp.data.count<1){
                            this.title2 = "暂无新的互动消息！";
                        }else{
                            this.isHint2 = true;
                            this.title2 = resp.data.title;
                        }
                    }                   
                }else {
                   Toast(resp.message)
                }

            })
       },
        //查询未读会员对话消息
        listByChatAll(){
            let that = this;
            let data={
                page:that.page,
                size:that.size
            }
            apiHttp.messageIndex.listByChatAll('',data,resp=>{
                if(resp.code==200&&resp.data!=undefined&&resp.data!=null&&resp.data.length!=0) {
                   that.chatAll=resp.data;
                    for(var p in resp.data){
                        resp.data[p].createTime = this.$dataTime(resp.data[p].createTime);
                        that.chatAll= resp.data;
                    }
                }else{
                 this.isShowHnit=true;
                }

            });
        },
        chatLink(nickName,code,headImg,sendUserId){
            this.updateStatusChat(sendUserId);
            this.$router.push({
                name:'chat',
                query:{
                    to_code:code,
                    to_username:nickName,
                    to_userId:sendUserId,
                    to_headImg:headImg
                }
            })
        },

        //根据消息Id改变消息状态为已读
        updateStatusChat(sendUserId){
            apiHttp.messageIndex.updateStatusChat(sendUserId,'',resp=>{
                if(resp.code==200){
                    //console.log(resp.message);
                }else{
                    //console.log(resp.message);
                }
            })
        },
        //返回首页
        returnIndex(){
            this.$router.push({
                name:"index"
            });
        },
        secrchListMessage(){
            this.$router.push({
                name:'search'               
            })
        },
    }
}
</script>
<style scoped>
.cz-title{
    height: 1.36rem;
    line-height: 1.36rem;
    padding: .4rem .6rem;
    width: calc(100% - 1.2rem);
    overflow: hidden;
}
.icon_return{
    width: .9rem;
    margin-top: .28rem;
}
.dynamic-name{
    padding: .6rem;
    min-height: 2.2rem;
}
.dynamic-name-tx{
    width: 1.6rem;
}

.name-box{
    margin-left: .6rem;
    min-height: 2.2rem;
    width:  calc(98% - 2.2rem);
    border-bottom: solid .03rem #f5f5f5;
}
.name-box-top,.name-box-xia{
    height: 1rem;
    display: block;
    line-height: 1rem;
}
.name-sex{
    width: .56rem;
    padding: 0 .2rem;
    margin-top: .2rem;
}
.name-xia{
    min-height: 1rem;
    display: block;
}
.name-xia img{
    width: .7rem;
}
.give-like-img{
    border-top: solid .4rem #f5f5f5; 
    padding: .22rem;
}
.income-li{
    padding: .6rem .6rem 0 .6rem;
}
.left-box{
    height: 2rem;
    width: 16%;
}
.left-box img{
    width: 90%;
    height: 100%;
}
.right-box{
    width: 79%;
    min-height: 2.4rem;
    padding-left: 5%;
}
.right-box span{
    min-height: 1rem;
    line-height: .8rem;
    display: block;
}
/*未读消息提示*/
.messHint{ 
    display:inline-block;
    width: .2rem;
    height: .2rem;  
    background-color:#D74D4D;   
    border-radius:50%;
    /* position: relative;
    left: 0.2rem;
    bottom: 2.2rem;   */ 
}
.hnit{
    text-align: center;
    color: #999999;
}
</style>

